<template>
	<view class="container">
		<view class="tabs">
			 <u-sticky bgColor="#fff">
			<u-tabs :list="list1" @click="click" lineWidth='50' lineHeight='5' 
			itemStyle="width:14%;height:96rpx;display:flex;	justify-content: center;"
			:scrollable="false"
			:activeStyle="{
			        color: '#1890ff',
			        fontWeight: 'bold',
			        transform: 'scale(1.05)'
			    }"></u-tabs>
				</u-sticky>
		</view>
		<view class="body">
			<scroll-view scroll-y="true" class="scrolly">
				<view class="body_list" v-for="(item,index) in car_list" :key="index">
					<view class="left">
						<text>车牌号：{{item.car_plate}}</text>
						<text>驾驶员名称：{{item.name}}</text>
					</view>
					<view class="right" v-if="type==3">
						<button @click="tolook(item.id)">轨迹</button>
					</view>
					
				</view>
				<view class="none" v-if="car_list.length==0">
					<image src="../../static/img/none.png" mode=""></image>
					<text>暂无车辆信息</text>
				</view>
			</scroll-view>
			
		</view>
		
	</view>
</template>

<script>
import { data } from '../../uni_modules/uview-ui/libs/mixin/mixin';
	export default {
		data() {
			return {
				type:1,
				list:'',
				car_list:[{id:'鲁q66666',name:'张三'}],
				
				page:1,
				lineid:0,
				is_agreement:1,
				freight_status:0,
				datas:{
				lat1:118.099481,
				lng1:24.583817,
				lat2:118.045616,
				lng2:24.366646,
				},
				list1:[{
					name:'已签约',
					id:1
				},
				{
					name:'空 闲',
					id:2
				},
				{
					name:'在 途',
					id:3
				},
				{
					name:'已申请',
					id:4
				},
				{
					name:'已支付',
					id:5
				}]
			};
		},
		onLoad(opt) {
			this.lineid=opt.lineid
			console.log(opt)
		},
		onShow() {
		this.car_list=''
			this.carlist()
		},
		methods:{
			//车辆列表
			carlist(){
				this.$carlist({
					line_id:this.lineid,
					page:this.page,
					status:this.type,
					freight_status:this.freight_status,
					is_agreement:this.is_agreement
				}).then(res=>{
					this.list=res.data
					this.car_list=[...this.car_list,...res.data.data]
					if(res.code!=1){
						this.$toast(res.msg)
					}
				})
			},
			  click(item) {
			                console.log('item', item);
							
							this.type=item.id
							if(item.id==1){
								this.is_agreement=item.id
							}else{
								this.is_agreement=0
							}
							
							if(item.id==4){
								this.type=0
									this.freight_status=2
							}if(item.id==5){
								this.type=0
									this.freight_status=3
							}
						
							uni.setNavigationBarTitle({
								title:item.name+'车辆'
							})
							// this.car_list=''
							// this.carlist()
			            },
						tolook(id){
							// uni.setStorageSync('address',this.datas)
							uni.navigateTo({
								url:"/pages/map/map?car_id="+id
							})
						}
						
		}
	}
</script>

<style lang="scss">
.container{
	.tabs{
		
	
		
	}
	.body{
		padding-top: 20rpx;
		.scrolly{
			height: 1300rpx;
		}
		.none{
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width: 360rpx;
				height: 300rpx;
				margin-bottom: 20rpx;
			}
			text{
				font-size: 32rpx;
				color: #999;
			}
			
		}
		.body_list{
			background: #fff;
			height: 220rpx;
			display: flex;
			padding: 10rpx 40rpx;
			margin-bottom: 20rpx;
			justify-content: space-between;
			
			.right{
				display:flex;
				align-items: center;
				button{
					width: 134rpx;
					height: 68rpx;
					background: #1890ff;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			
			.left{
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				
				text{
					font-size: 36rpx;
					font-weight: 600;
				}
			}
			
		}
	}
}
</style>
